<template>
    <div class="main-goldManagement">
        <i class="el-icon-menu">筛选</i>
        <form
            class="el-form demo-form-inline el-form--inline"
            style="margin-top: 20px"
        >
            <div class="el-form-item">
                <label class="el-form-item__label" style="font-weight: bolder"
                    >输入搜索</label
                >
            </div>
            <div class="el-form-item__content">
                <div class="el-input">
                    <input
                        type="text"
                        autocomplete="off"
                        class="el-input__inner"
                        placeholder="请输入产品名称"
                    />
                </div>
            </div>
            <el-button type="primary" style="margin-left: 10px">
                <i class="el-icon-search"></i>
                <span>筛选</span>
            </el-button>
            <el-button @click="open">清空筛选条件</el-button>
            <el-button type="info" plain>取消</el-button>
        </form>
        <i class="el-icon-menu">回收站列表</i>
        <div style="margin-top: 20px">
            <el-table
                border
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="产品id" width="150">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column label="产品名称" width="150">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="发行机构（信息披露）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="黄金价格（信息披露）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="风险等级" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="购买金额（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="年龄范围（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="领取金额（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="资金到账日期（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="交易日期（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="兑换实物金（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="利息规则（交易规则）" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="起购金额" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="数据源的API名称" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="利息率" width="150">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="手续费" width="150">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="抽成费" width="150">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="产品数量" width="150">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="open2" type="primary">
                    <i class="el-icon-delete"></i>
                    <span>批量彻底删除</span>
                </el-button>
            </div>
            <div style="text-align: center; margin-top: 20px">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="1000"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
            ],
            multipleSelection: [],
        };
    },
    methods: {
        open() {
            this.$message({
                message: "清空成功！",
                type: "success",
            });
        },
        toggleSelection() {
            this.$refs.multipleTable.clearSelection();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        open2() {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
.main-goldManagement {
    margin: 0;
    padding: 0;
    padding-left: 50px;
    text-align: left;
    line-height: normal;
}
</style>